<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .imgList li {
      height: 500px;
    }

    .imgList li img {
      height: 100%;
    }
  </style>
</head>
<body>
<!--
原理 : 浏览器 可见区域 加载的图片 加载出来 见不着的不加载
//1. 监听浏览器的滚动事件
//2. 图片距离顶部的距离和 浏览器的视口的高度
//3. 设置图片的高度
//4. 图片的src先设置为空
//5. 什么时候加载 : 图片出现在可是区域再加载
-->

<ul class="imgList">
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
</ul>

<script>

  const imgArr = [
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/1.%E5%A4%A9%E9%AD%81%E6%98%9F_%E5%91%BC%E4%BF%9D%E4%B9%89_%E5%AE%8B%E6%B1%9F-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/2.%E5%A4%A9%E7%BD%A1%E6%98%9F_%E7%8E%89%E9%BA%92%E9%BA%9F_%E5%8D%A2%E4%BF%8A%E4%B9%89-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/3.%E5%A4%A9%E6%9C%BA%E6%98%9F_%E6%99%BA%E5%A4%9A%E6%98%9F_%E5%90%B4%E7%94%A8-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/4.%E5%A4%A9%E9%97%B2%E6%98%9F_%E5%85%A5%E4%BA%91%E9%BE%99_%E5%85%AC%E5%AD%99%E8%83%9C-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/5.%E5%A4%A9%E5%8B%87%E6%98%9F_%E5%A4%A7%E5%88%80_%E5%85%B3%E8%83%9C-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/6.%E5%A4%A9%E9%9B%84%E6%98%9F_%E8%B1%B9%E5%AD%90%E5%A4%B4_%E6%9E%97%E5%86%B2-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/7.%E5%A4%A9%E7%8C%9B%E6%98%9F_%E9%9C%B9%E9%9B%B3%E7%81%AB_%E7%A7%A6%E6%98%8E-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/8.%E5%A4%A9%E5%A8%81%E6%98%9F_%E5%8F%8C%E9%9E%AD_%E5%91%BC%E5%BB%B6%E7%81%BC-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/9.%E5%A4%A9%E8%8B%B1%E6%98%9F_%E5%B0%8F%E6%9D%8E%E5%B9%BF_%E8%8A%B1%E8%8D%A3-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/10.%E5%A4%A9%E8%B4%B5%E6%98%9F_%E5%B0%8F%E6%97%8B%E9%A3%8E_%E6%9F%B4%E8%BF%9B-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/11.%E5%A4%A9%E5%AF%8C%E6%98%9F_%E6%89%91%E5%A4%A9%E9%9B%95_%E6%9D%8E%E5%BA%94-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/12.%E5%A4%A9%E6%BA%80%E6%98%9F_%E7%BE%8E%E9%AB%AF%E5%85%AC_%E6%9C%B1%E4%BB%9D-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/13.%E5%A4%A9%E5%AD%A4%E6%98%9F_%E8%8A%B1%E5%92%8C%E5%B0%9A_%E9%B2%81%E6%99%BA%E6%B7%B1-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/14.%E5%A4%A9%E4%BC%A4%E6%98%9F_%E8%A1%8C%E8%80%85_%E6%AD%A6%E6%9D%BE-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/15.%E5%A4%A9%E7%AB%8B%E6%98%9F_%E5%8F%8C%E6%9E%AA%E5%B0%86_%E8%91%A3%E5%B9%B3-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/16.%E5%A4%A9%E6%8D%B7%E6%98%9F_%E6%B2%A1%E7%BE%BD%E7%AE%AD_%E5%BC%A0%E6%B8%85-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/17.%E5%A4%A9%E6%9A%97%E6%98%9F_%E9%9D%92%E9%9D%A2%E5%85%BD_%E6%9D%A8%E5%BF%97-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/18.%E5%A4%A9%E4%BD%91%E6%98%9F_%E9%87%91%E6%9E%AA%E6%89%8B_%E5%BE%90%E5%AE%81-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/19.%E5%A4%A9%E7%A9%BA%E6%98%9F_%E6%80%A5%E5%85%88%E9%94%8B_%E7%B4%A2%E8%B6%85-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/20.%E5%A4%A9%E9%80%9F%E6%98%9F_%E7%A5%9E%E8%A1%8C%E5%A4%AA%E4%BF%9D_%E6%88%B4%E5%AE%97-5143178.png'];
  let imgList = [...document.querySelectorAll('img')];
  imgList.forEach((img, index) => img.dataset.src = imgArr[index]);
  let length = imgList.length;
  console.log(length);
  const lazyLoad = (function () {
    // 处理一些 和 lazyLoad 无关的逻辑
    let count = 0; // 加载过的图片的数量
    // length === count : 图片全部加载完毕
    // 不用监听

    return function () {
      console.log('滚动');
      // 1. 判断图片top值 和 视口高度的关系
      // 获取图片距离顶部的高度
      let deleteIndex = [];
      console.log(count);
      imgList.forEach((img, index) => {
        if (window.innerHeight > img.getBoundingClientRect().top) {
          // 加载图片
          deleteIndex.push(index);
          img.src = img.dataset.src;
          count++;
          if (count >= length) {
            // 移除监听
            document.removeEventListener('scroll', lazyLoad);
          }
        }
      });
      imgList = imgList.filter((img, index) => !deleteIndex.includes(index))
    }
  })();


  lazyLoad();
  document.addEventListener('scroll', lazyLoad);


</script>


</body>
</html>
